import { deleteBioinformaticDoc, listBioinformaticDoc } from '@/services/api/bioinformaticDoc';
import { convertPageData } from '@/utils/request';
import { openConfirm } from '@/utils/ui';
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
import { ActionType, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
import { Button } from 'antd';
import { useRef, useState } from 'react';
import InputDialog from './InputDialog';

export default () => {
  const refAction = useRef<ActionType>(null);
  const [selectedRowKeys, selectRow] = useState<number[]>([]);
  const [bioinformaticDoc, setBioinformaticDoc] = useState<API.BioinformaticDocVO>();
  const [visible, setVisible] = useState(false);
  const columns: ProColumns<API.BioinformaticDocVO>[] = [
    {
      title: '文献ID',
      dataIndex: 'id',
      width: 100,
      search: false,
    },
    {
      title: '文献标题',
      dataIndex: 'title',
      width: 100,
      render: (dom, record) => {
        return (
          <a
            onClick={() => {
              setBioinformaticDoc(record);
              setVisible(true);
            }}
          >
            {dom}
          </a>
        );
      },
    },
    {
      title: '作者',
      dataIndex: 'author',
      width: 100,
      search: false,
    },
    {
      title: 'URL',
      dataIndex: 'url',
      search: false,
    },
    // {
    //   title: '创建人',
    //   dataIndex: 'createdByDesc',
    //   width: 100,
    //   search: false,
    // },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      width: 150,
      search: false,
    },
  ];

  const handleDelete = async () => {
    if (!selectedRowKeys?.length) return;
    openConfirm(`您确定删除${selectedRowKeys.length}条记录吗`, async () => {
      await deleteBioinformaticDoc(selectedRowKeys);
      refAction.current?.reload();
    });
  };

  return (
    <PageContainer>
      <ProTable<API.BioinformaticDocVO>
        actionRef={refAction}
        rowKey="id"
        request={async (params = {}) => {
          return convertPageData(await listBioinformaticDoc(params));
        }}
        toolBarRender={() => [
          <Button
            type="primary"
            key="primary"
            onClick={() => {
              setBioinformaticDoc(undefined);
              setVisible(true);
            }}
          >
            <PlusOutlined /> 新建
          </Button>,
          <Button
            type="primary"
            key="primary"
            danger
            onClick={handleDelete}
            disabled={!selectedRowKeys?.length}
          >
            <DeleteOutlined /> 删除
          </Button>,
        ]}
        columns={columns}
        rowSelection={{
          onChange: (rowKeys) => {
            selectRow(rowKeys as number[]);
          },
        }}
      />
      <InputDialog
        detailData={bioinformaticDoc}
        onClose={(result) => {
          setVisible(false);
          result && refAction.current?.reload();
        }}
        visible={visible}
      />
    </PageContainer>
  );
};
